<template>
	<view>

		<u-sticky>
			<view class="uni-flex uni-row" style="background-color: #FFFFFF; padding: 0rpx 20rpx;">
				<view style="-webkit-flex: 1;flex: 1; ">
					<input class="uni-search" v-model="inputVal" confirm-type="search" placeholder="输入内容以进行搜索" focus=true @confirm="searchMth" />
				</view>
				<view style="width: 70rpx; margin-right: 15rpx; margin-left: 15rpx; font-size: 32rpx; padding-top: 30rpx;" @tap="cancelSearch">
					<!-- <navigator url="home" open-type="navigateBack" hover-class="other-navigator-hover"> -->
					取消
					<!-- </navigator> -->
				</view>
			</view>
		</u-sticky>
	
		<view v-if="isSearch">

			<u-row style="background-color: #FFFFFF;">
				<u-col :span="7">
					<view style="font-size: 35rpx; background-color: #FFFFFF; padding-left: 20rpx; padding-top: 0rpx;">
						为你找到以下 {{myCourse.length}} 条结果
					</view>
				</u-col>
				<u-col :span="5">
					<!-- <u-dropdown :title-size="30">
						<u-dropdown-item v-model="value" :title="value" :options="options"></u-dropdown-item>
					</u-dropdown> -->
				</u-col>
			</u-row>

			<view v-for="(item, index) in myCourse" :key="index">
				<u-card :border="false" :foot-border-top="false" padding="10rpx" margin="0rpx" :border-radius="0" style="padding: 0rpx 20rpx;">
					<view class="" slot="body">
						<view>
							<u-row style="position: relative;" @tap="courseDetails(item.id)">
								<u-col :span="6" @tap="courseDetails(item.id)" style="padding: 20rpx 10rpx;">
									<u-image border-radius="10rpx" width="100%" height="200rpx" :src="url + 'courseImages/' + item.courseImage"></u-image>
								</u-col>
								<u-col :span="6" @tap="courseDetails(item.id)">
									<view class="textStyle">
										<view class="titleStyle">{{item.courseName}}</view>
										<view class="schoolStyle">{{item.schoolName}}</view>
										<view class="studentCountStyle">
											<u-icon color="#909399" name="account" style="margin-right: 20rpx;"></u-icon>教师：{{item.courseTeacher}}
										</view>
										<!-- <view class="courseStyle">更新到{{item.upLoad}}课时</view> -->
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
				</u-card>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getCourseClassifySearch,
		getAllCourseSmallClassify
	} from '@/api/modules/home.js'

	export default {
		data() {
			return {
				params : {},
				url: this.GOBAL.baseURL,
				myCourse: [], //  课程搜索的结果

				isSearch: false,

				// 加载更多
				status: 'loadmore',
				list: 15,
				page: 0,

				inputVal: '',
				value: '默认排序',
				options: [{
						label: '默认排序',
						value: '默认排序',
					},
					{
						label: '选课人数优先',
						value: '选课人数优先',
					},
					{
						label: '热门优先',
						value: '热门优先',
					}
				],
			}
		},
		methods: {
			courseDetails(params) {
				// console.log(params)
				// uni.navigateTo({
				// 	url: '../course/courseDetails?courseID=' + params
				// });
				uni.navigateTo({
					url: '../joinCourse/joinCourse?courseID=' + params
				});
			},
			cancelSearch() {
				let that = this;

				if (that.inputVal == '') {
					uni.navigateBack({
						delta: 1
					});
				} else {
					that.inputVal = '';
					getAllCourseSmallClassify(that.params)
						.then((resp) => {
							that.myCourse = resp.data
						})
						.catch((resp) => {})
				}

			},
			searchMth(event) {
				// console.log(event.target.value)
				let that = this;
				
				let data = {
					courseName :event.target.value,
					courseClassifyID: that.params.courseClassifyID
				}
				
				getCourseClassifySearch(data)
					.then((resp) => {
						that.myCourse = resp.data;
					})
					.catch((resp) => {
						that.toast("搜索失败，请稍后再试！", 3);
					})
			},
		},
		onLoad(params) {
			let that = this;
			that.params = params;
			// console.log(params)
			getAllCourseSmallClassify(params)
				.then((resp) => {
					that.myCourse = resp.data;
					that.isSearch = true;
				})
				.catch((resp) => {})
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style scoped>
	.uni-search {
		width: auto;
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #F7F7F7;
		flex: 1;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 6em 6em 6em 6em;
		text-align: center;
	}

	input::-ms-input-placeholder {
		text-align: center;
	}

	input::-webkit-input-placeholder {
		text-align: center;
	}

	.search-hot {
		margin-bottom: 5rpx;
		margin-top: 5rpx;
	}

	.textStyle {
		margin-left: 30rpx;
	}

	.titleStyle {
		color: #000000;
		font-size: 33rpx;
		position: absolute;
		top: 20rpx;
	}

	.schoolStyle {
		color: #909399;
		margin-top: 45rpx;
		font-size: 25rpx;
		position: absolute;
		top: 60rpx;
	}

	.studentCountStyle {
		color: #909399;
		position: absolute;
		bottom: 20rpx;
		font-size: 25rpx;
	}	
</style>
